<template>
	<div class="login-bg" v-if="show">
		<div class="position-absolute vw-100 vh-100 d-flex justify-content-center">
			<video autoplay muted loop style="width: 1920px; height: 1080px;"
				src="https://bpic.588ku.com/video_listen/588ku_video/25/03/12/17/43/17/video67d157353a44c.mp4"></video>
		</div>
		<Row style="z-index: 99;" class="w-100 d-flex justify-content-center vh-100 align-items-center">
			<Col class="bg-white p-5 rounded shadow" :xs="23" :sm="22" :md="20" :lg="16" :xl="12" :xxl="8">
			<h4 class="text-center text-primary w-100">瑜加舞岛课房平台</h4>
			<Form class="w-100 p-5" ref="loginObject" :model="loginObject" :rules="ruleInline" block>
				<FormItem prop="user">
					<Input type="text" v-model="loginObject.user" placeholder="用户名">
					<Icon type="ios-person-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem prop="password">
					<Input type="password" v-model="loginObject.password" placeholder="密码">
					<Icon type="ios-lock-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem>
					<Button class="w-100" type="primary" @click="handleSubmit('loginObject')">登录</Button>
				</FormItem>
			</Form>
			<div class="w-100 text-center">
				<a class="text-secondary m-0 p-0" href='https://beian.miit.gov.cn/'>琼ICP备2024038595号-1</a>
			</div>
			</Col>
		</Row>

	</div>
</template>
<script>
	import store from '../../common/store.js';
	export default {
		data() {
			return {
				show: true,
				loginObject: {
					user: '',
					password: '',
					rem: false
				},
				ruleInline: {
					user: [{
						required: true,
						message: '账户名必须输入',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: '密码必须输入',
							trigger: 'blur'
						},
						{
							type: 'string',
							min: 6,
							message: '密码至少6位',
							trigger: 'blur'
						}
					]
				}
			}
		},
		created: function() {

		},
		methods: {
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {

						let param = {
							data: {
								account: this.$data.loginObject.user,
								password: this.$data.loginObject.password
							},
							type: "ACP",
							rem: this.$data.loginObject.rem
						};
						store.commit("login", param);
					} else {
						this.$Message.error('登录失败!');
					}
				})
			}
		}
	}
</script>

<style scoped>
	.login-bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: #F1EFEE;
	}
</style>